<template>
  <a-modal
    :width="width"
    :wrapClassName="'publicModal ' + modalStyle"
    :destroyOnClose="true"
    :footer="null"
    :maskStyle="{ background: 'rgba(0,0,0, 0.65)' }"
    :centered="true"
    :maskClosable="false"
    :closable="false"
    :visible="publicVisible"
    :zIndex="zIndex"
  >
    <div class="modalHeader">
      <slot name="header">
        <div class="flex justify-between">
          <div class="modalTitle">
            <span class="cus-icon"></span>
            {{ title }}
          </div>
          <div @click="cancel('button')" class="modalClose flex align-center">
            <svg
              t="1656053368953"
              class="icon"
              viewBox="0 0 1099 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2641"
              width="16"
              height="16"
            >
              <path
                d="M716.56 349.5c-11.5-11.8-25-7.9-36.6 4.8L526.16 512.2 366.16 352.4c-11.8-10.8-23-14.8-34.1-3.7-9.1 10.6-8.2 20.3 4.1 33.6l157.3 160.4L338.16 699.5c-11.1 11.4-16.6 22.9-3.6 34.9 14.3 13.2 25.9 3 35.4-6.5L526.16 571.4l159.4 154.8c11.4 10.3 23.1 17.5 32.9 8.9 12-10.4 7.3-21.2-4-33.8L556.96 542.7l155.7-162.4C722.26 369.1 725.46 358.2 716.56 349.5zM479.76 538.8"
                p-id="2642"
                fill="#7CB6EF"
              ></path>
            </svg>
            关闭
          </div>
        </div>
      </slot>
    </div>
    <div class="modalCotent">
      <slot name="content"></slot>
    </div>
    <div class="modalFooter">
      <slot name="footer" class="footer">
        <div style="padding: 20px 0">
          <a-button class="ant-btn" @click="cancel">{{ cancelContext }}</a-button>
          <a-button class="ant-btn" @click="handleOk">{{ confirmContext }}</a-button>
        </div>
      </slot>
    </div>
  </a-modal>
</template>
<script>
export default {
  name: 'publicModal',
  props: {
    title: {
      type: String,
      default: '',
    },
    width: {
      type: String || Number,
      default: '600px',
    },
    publicVisible: {
      type: Boolean,
      default: false,
    },
    modalStyle: {
      type: String,
      default: '',
    },
    cancelContext: {
      type: String,
      default: '取消',
    },
    confirmContext: {
      type: String,
      default: '确定',
    },
    zIndex: {
      type: Number,
      default: 1000,
    },
  },
  data () {
    return {}
  },
  methods: {
    cancel (target) {
      this.$emit('cancel', target)
    },
    handleOk () {
      this.$emit('handleOk')
    },
  },
}
</script>
<style lang="less">
</style>
